<template>
  <j-modal
    :title="title"
    :visible="visible"
    fullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <div class="top-header">
        <h3>
          项目名称：{{ model.proName }} <span style="color: #999;font-size: 12px;">{{ model.proYear }}年</span>
        </h3>
        <a-row class="j-modal-title-row" type="flex">
          <a-col :span="12">
            <div>项目区域：{{ model.areaId_dictText }}</div>
          </a-col>
        </a-row>
        <a-row class="j-modal-title-row" type="flex">
          <a-col :span="12">
            <div>涉及小区/村庄：{{ model.townNum }}个</div>
          </a-col>
          <a-col :span="12">
            <a-button style="float:right;" type="primary" @click="showAddModel">添加小区/村庄</a-button>
          </a-col>
        </a-row>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table
          size="middle"
          bordered
          rowKey="belongTown"
          :columns="columns"
          :dataSource="townList"
          class="j-table-force-nowrap projectAddTownWrap"
        >
          <span slot="content" slot-scope="text, record">
            <!-- <j-dict-select-tag v-model="record.content" placeholder="请选择" dictCode="ps_project_Rectification" /> -->
            <j-multi-select-tag v-model="record.content" :options="projectRectificationList" placeholder="请选择">
            </j-multi-select-tag>
          </span>
          <span slot="action" slot-scope="text, record">
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.belongTown)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
      <!-- table区域-END -->
      <selectTownModal
        ref="selectTownModal"
        :modal-width="500"
        :multi="true"
        :rootOpened="true"
        :treeOpera="true"
        :root-id="model.areaId"
        :depart-id="townIds"
        store="id"
        text="departName"
        @ok="selectTown"
      />
    </a-spin>
  </j-modal>
</template>

<script>
import selectTownModal from '@/components/selectTownModal'
import { underLinetoHump } from '@/components/_util/StringUtil'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'projectTownAdd',
  components: {
    selectTownModal
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (t, r, index) => {
            return parseInt(index) + 1
          }
        },
        {
          title: '街道/乡镇',
          align: 'center',
          width: 200,
          dataIndex: 'belongStreet'
        },
        {
          title: '小区/村庄',
          align: 'center',
          width: 200,
          dataIndex: 'belongTownLabel'
        },
        {
          title: '整改内容',
          align: 'center',
          dataIndex: 'content',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      title: '新增村庄',
      width: 1200,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      url: {
        list: '/internal/project/list',
        projectCnt: '/internal/department/queryById',
        townAdd: '/paishui/projectTownDetail/add'
      },
      // townIds: '',
      townList: [],
      projectRectificationList: [],
      townDefault: {
        belongProject: '',
        belongStreet: '',
        belongTown: '',
        content: '',
        id: '',
        longitude: '',
        latitude: ''
      }
    }
  },
  computed: {
    storeField() {
      let field = this.customReturnField
      if (!field) {
        field = this.store
      }
      return underLinetoHump(field)
    },
    townIds() {
      return this.townList.map(item => item.id).join(',') || ''
    }
  },
  created() {
    //备份model原始值
    this.initDictConfig()
  },
  methods: {
    showAddModel() {
      this.$refs.selectTownModal.show()
    },
    initDictConfig() {
      //初始化字典 - 性别
      initDictOptions('ps_project_Rectification').then(res => {
        if (res.success) {
          this.projectRectificationList = res.result
        }
      })
    },
    selectTown(rows) {
      console.log('selectTown', rows)
      if (rows.length) {
        const { model } = this
        rows.forEach(town => {
          if (!this.townIds.includes(town.id)) {
            const newTown = {
              belongProject: model.id,
              belongStreet: town.parentId,
              belongTown: town.id,
              belongTownLabel: town.departName,
              content: '',
              longitude: town.longitude,
              latitude: town.latitude
            }
            this.townList.push(newTown)
          }
        })
      }
    },
    view(record) {
      this.townList = []
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    async handleOk() {
      console.log('提交信息')
      if (this.townList.some(item => !item.content)) {
        this.$message.warning('请选择完村庄的整改信息')
        return
      }

      const params = this.townList
      // console.log('params', params)
      const res = await httpAction('/paishui/projectTownDetail/add/bat', params, 'post')
      if (res.code === 200) {
        this.handleCancel()
        this.$emit('ok')
      } else if (res.code === 500) {
        const towns = res.message
        const townArr = this.townList.filter(item => towns.includes(item.belongTown))
        this.$message.warning('已存在村庄：' + townArr.map(item => item.belongTownLabel).join(','))
      }
    },
    addTowm() {},
    handleDelete(belongTown) {
      this.townList = this.townList.filter(item => item.belongTown === belongTown)
    }
  }
}
</script>

<style lang="less" scoped>
.top-header {
  margin-bottom: 10px;
}

.projectAddTownWrap .ant-select {
  min-width: 300px;
}
</style>
